<template>
	<div class="hottable">
		<div class="head">
			<h4>热度图片列表</h4>
			<router-link to="/admin/update" class="addnew">添加新的图片</router-link>
		</div>
		<div class="line"></div>
		<el-table :data="hotlist" height="500" border style="width: 100%;height: 500px;">
			<el-table-column prop="id" label="id" width="180">
			</el-table-column>
			<el-table-column prop="memo" label="名字" width="180">
			</el-table-column>
			<el-table-column prop="type" label="类型">
			</el-table-column>
			<el-table-column prop="hot" label="热度">
			</el-table-column>
			<el-table-column prop="" label="图片">
				<template slot-scope="scope">
					<div>
						<img v-bind:src="`http://127.0.0.1/api/public/showimg/${scope.row.picture}`"
							style="height: 60px; width: 60px;" />
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="" label="操作">
				<template slot-scope="scope">
					<div>
						<router-link :to="`/admin/update/${scope.row.id}`">修改</router-link>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="del" label="操作">
				<button @click="del()" >删除</button>
			</el-table-column>
		</el-table>
	</div>
</template>


<script>
	export default {
		name: 'Hotlist',
		data() {
			return {
				hotlist: []
			}
		},
		computed: {},
		methods: {
			findhotpic() {
				this.$get('/api/adm/hot/findAll').then((resp) => {
					console.log(resp.data);
					this.hotlist = resp.data.data;
				})
			}
		},
		del(){
			console.log('删除');
		},
		mounted() {
			this.findhotpic();
		}
	}
</script>

<style scoped>
	a {
		color: #000000;
	}
	button{
		color: #000000;
		border: none;
		background-color:transparent;
	}
	.head {
		display: flex;
		justify-content: space-between;
	}

	.line {
		border: #409eff 1px solid;
		width: 100%;
		margin-bottom: 10px;
	}

	.addnew {
		line-height: 2em;
		height: 2em;
		border-radius: 5px;
		width: 130px;
		color: white;
		background-color: #409eff;
		margin-bottom: 10px;
	}
</style>
